<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap-table冻结列</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../bootstrap.min.css"/>
    <link rel="stylesheet" href="../dist/bootstrap-table.css"/>
    <link rel="stylesheet" href="../dist/plugins/fixed-columns/bootstrap-table-fixed-columns.min.css"/>
    <script type="text/javascript" src="../../jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../popper.min.js"></script>
    <script type="text/javascript" src="../../bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../dist/plugins/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
</head>
<body>

<div id="toolbar">
    <form class="form-group form-inline">
        <div class="col-sm-4">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">左侧冻结</div>
                </div>
                <input type="text" class="form-control" id="fixedColumn" value="2">
            </div>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">右侧冻结</div>
                </div>
                <input type="text" class="form-control" id="fixedRightColumn" value="2">
            </div>
        </div>
        <div class="col-auto">
            <button type="button" id="resetGridFixed" class="btn btn-primary">设置</button>
        </div>
    </form>
</div>
<table id="data-table"></table>

<script type="text/javascript">
    $(function () {
        $("#resetGridFixed").click(function () {
            loadData();
        });
        loadData();
    });

    function loadData() {
        var date = new Date();
        var month = date.getMonth() + 1;
        var maxDate = new Date(date.getFullYear(), month, 0).getDate();
        var columns = [[
            {"title": "序号", "field": "number", align: "center", valign: "middle", "rowspan": 2},
            {"title": "城市", "field": "city", align: "center", sortable: true, valign: "middle", "rowspan": 2},
            {"title": "温度", "field": "weather", align: "center", sortable: true, valign: "middle", "rowspan": 2},
            {"title": "日期", align: "center", valign: "middle", "colspan": maxDate},
            {"title": "城市", "field": "city", align: "center", sortable: true, valign: "middle", "rowspan": 2},
            {"title": "温度", "field": "weather", align: "center", sortable: true, valign: "middle", "rowspan": 2}
        ]];
        //构造动态列
        var dynamicColumn = [];
        for (var i = maxDate; i > 0; i--) {
            var columnDate = {"title": month + "月" + i + "日", "field": "day_" + i, align: "center", valign: "middle"};
            dynamicColumn.push(columnDate);
        }
        columns[1] = dynamicColumn;
        //构造数据
        var datas = [];
        for (var i = 0; i < 10; i++) {
            var data = {"number": i + 1, "city": "襄阳", "weather": (15 + i) + " °C"};
            for (var j = maxDate; j > 0; j--) {
                data["day_" + j] = j % 2 == 0 ? "√" : "×";
            }
            datas[i] = data;
        }
        renderTable(columns , datas);
    }

    function renderTable(columns , datas) {
        var fixedColumn = $("#fixedColumn").val();
        var fixedRightColumn = $("#fixedRightColumn").val();
        $("#data-table").bootstrapTable("destroy").bootstrapTable({
            toolbar: "#toolbar",
            fixedColumns: true,
            fixedNumber: fixedColumn,
            fixedRightNumber: fixedRightColumn,
            "columns": columns,
            data: datas
        });
    }

</script>
</body>
</html>